<template>
    <div class="upload">
        <el-upload
            v-loading="loading"
            element-loading-text="上传中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            accept="image/*"
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :headers="headers"
            :before-upload="beforeUpload"
            :on-success="successHandle"
        >
            <img v-if="img!==''" :src="img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script>
export default {
    props: {
        img: {
            type: String,
            default: ''
        }
    },
      watch: {
    img (value) {
        console.log(value)
        console.log('图片')
      this.file = value
    },
    clearList () {
      this.file = ''
    },
    file (value) {
      const list = value
      console.log(value)
      this.img = value
      this.$emit('update', list)
    }
  },
    data() {
        return {
            headers: {
                accessToken: sessionStorage.getItem('accessToken')
            },
            loading: false,
            uploadURL: window.poIP + '/web/pageResource/load',
             file: this.img ? this.img : ''
        };
    },
    methods: {
        // 图片上传之前
        beforeUpload() {
            this.loading = true;
        },
        successHandle(response, file, fileList) {
            this.file = response.data;
            this.loading = false;
        }
    }
};
</script>
<style >
.upload .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.upload .avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.upload .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.upload .el-upload--text,
.upload .el-form-item__content {
    width: 100px;
    height: 100px;
    display: block;
}
.upload .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>